<template>
  <div>
    <div class="equipment">
      <div class="equipment-title">
        <div>{{ DeviceInfo.DeviceId }}</div>
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-button
            type=""
            size="mini"
            @click="req"
            v-if="!DeviceInfo.ControllerFlag"
          >
            申请控制
          </el-button>
          <el-button
            type="success"
            size="mini"
            @click="DeviceFreeRequest1"
            v-else-if="DeviceInfo.ControllerIP == '解除控制'"
          >
            解除控制
          </el-button>
          <el-button type="success" size="mini" v-else>
            {{ DeviceInfo.ControllerIP }}
          </el-button>
          <div style="margin-left: 10px"></div>
          <template
            v-if="
              DeviceInfo.ControllerFlag && DeviceInfo.ControllerIP == '解除控制'
            "
          >
            <i class="green"></i>
          </template>
          <template v-else>
            <i class="grey"></i>
          </template>
        </div>
      </div>
      <div class="equipment-content">
        <!-- <div class="equipment-name">{{ DeviceInfo.DeviceId }}</div> -->
        <el-row :gutter="20" justify="space-between">
          <el-col :span="24">
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
              "
            >
              <div class="equipment-state" style="flex: 1">
                <div class="label">机器人状态</div>
                <i class="green"></i>
              </div>
              <!-- <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: end;
                "
              >
                <el-dropdown @command="handleCommand">
                  <el-button type="primary">
                    更多操作
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">移动</el-dropdown-item>
                    <el-dropdown-item command="b">取料</el-dropdown-item>
                    <el-dropdown-item command="c">放料</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div> -->
            </div>
          </el-col>
          <template v-for="(item, index) in DeviceInfo.Grippers">
            <el-col :span="24">
              <div
                style="border: 1px solid #eee; padding: 10px; margin-top: 10px"
              >
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;
                  "
                >
                  <div class="equipment-state" style="flex: 1">
                    <div class="label">夹爪编号：{{ item.GripperId }}</div>
                    <!-- <i class="green"></i> -->
                  </div>
                  <div
                    style="
                      flex: 1;
                      display: flex;
                      flex-direction: row;
                      align-items: center;
                      justify-content: end;
                    "
                  >
                    <el-button
                      size="small"
                      type="primary"
                      @click="RobotTake(item)"
                      :disabled="
                        !DeviceInfo.ControllerFlag && item.PartId != ''
                      "
                    >
                      取料
                    </el-button>
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;
                  "
                >
                  <div class="equipment-state" style="flex: 1">
                    <div class="label">零件编号：{{ item.PartId }}</div>
                    <!-- <i class="green"></i> -->
                  </div>
                  <div
                    style="
                      flex: 1;
                      display: flex;
                      flex-direction: row;
                      align-items: center;
                      justify-content: end;
                    "
                  >
                    <el-button
                      size="small"
                      type="primary"
                      @click="RobotPut(item)"
                      :disabled="
                        !DeviceInfo.ControllerFlag && item.PartId == ''
                      "
                    >
                      放料
                    </el-button>
                  </div>
                </div>
              </div>
            </el-col>
          </template>
        </el-row>
      </div>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          prop="DeviceId"
          label="设备编号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="DeviceLocation"
          label="设备点位"
          width="180"
        ></el-table-column>
        <el-table-column prop="LocId" label="库位编号"></el-table-column>
        <el-table-column prop="PartId" label="零件编号"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    RobotPutInfo,
    DeviceUseRequest,
    RobotTakeInfo,
    RobotCmdExec,
    DeviceFreeRequest,
  } from '@/api/index'

  export default {
    props: {
      DeviceInfo: {
        type: Object,
        default: {
          DeviceId: '',
          CommunicationState: '',
          RunningState: '',
          OfflineState: '',
          Gippers: [],
          Cmd: '',
        },
      },
    },
    data() {
      return {
        DeviceId: '',
        form: {
          Cmd: '',
          Gripper: '',
          DeviceLocation: '',
          HouseLoc: '',
        },
        dialogVisible: false,
        DeviceBasicInfo: [],
        DeviceRealtimeInfo: {},
        dialogVisible: false,
        options: [],
        tableData: [],
        currentRow: null,
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.currentRow = val
      },
      RobotTake(item) {
        console.log('Gripper', item)
        RobotTakeInfo().then((res) => {
          this.tableData = res.DeviceList
          this.form.Cmd = 'Take'
          this.form.Gripper = item.GripperId
          this.form.DeviceLocation = ''
          this.form.HouseLoc = ''
          this.dialogVisible = true
        })
      },
      RobotPut(item) {
        console.log('item', item)
        RobotPutInfo({ PartId: item.PartId }).then((res) => {
          this.tableData = res.DeviceList
          this.form.Cmd = 'Put'
          this.form.Gripper = item.GripperId
          this.form.DevLoc = ''
          this.form.HouseLoc = ''
          this.dialogVisible = true
        })
      },
      DeviceFreeRequest1() {
        let params = { DeviceId: this.DeviceInfo.DeviceId }
        DeviceFreeRequest(params).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      submit() {
        console.log('this.form.Gripper', this.form)
        if (!this.currentRow) {
          this.$baseMessage('请选择', 'error', 'vab-hey-message-error')
          return false
        }

        this.form.DeviceId = this.DeviceInfo.DeviceId
        this.form.DeviceLocation = this.currentRow.DeviceLocation
        this.form.DevLoc = this.currentRow.DeviceId
        // this.form.DevLoc = this.currentRow.DeviceId
        this.form.Gripper = this.form.Gripper
        this.form.HouseLoc = this.currentRow.LocId
        RobotCmdExec(this.form).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
            this.dialogVisible = false
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      req() {
        let params = { DeviceId: this.DeviceInfo.DeviceId }
        DeviceUseRequest(params).then((res) => {
          if (res.Message == 'Success') {
            this.$emit('fetch-data')
          } else {
            this.$baseMessage(res.Message, 'error', 'vab-hey-message-error')
          }
        })
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleCommand(command) {
        this.dialogVisible = true
      },

      handleClose() {
        this.dialogVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #89c6ff;
  }
  .equipment {
    border-radius: 10px;
    box-shadow: 0px 2px 15px rgba(231, 231, 231, 0.7);
    margin-bottom: 30px;

    &-title {
      display: block;
      width: 100%;
      // height: 38px;
      color: #fff;
      text-align: center;
      line-height: 38px;
      background-color: #2f54eb;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }

    &-content {
      padding: 20px 15px;
    }

    &-name {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    &-state {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      // margin-top: 10px;
    }

    .grey {
      background-color: #cccccc;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
      flex: none;
    }

    .green {
      flex: none;
      background-color: #07c160;
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 50%;
    }

    .label {
      // width: 100px;
    }
  }
</style>
